<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<title>后台管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">-->
	<link rel="stylesheet" href="/plugin/elementUI/elementUI.css">
	<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
</head>
<body class="childrenBody">
	<div class="main">
		<div v-show="showList">
			<el-row type="flex" justify="start">
				<el-col :span="4">
					<el-input placeholder="请输入菜单名称" icon="search" v-model="queryParam.title" :on-icon-click="query" v-on:keyup.enter="query" />
				</el-col>
				<el-col :span="20">
					<div align='right'>
						<shiro:hasPermission name="sys:file:add">
							<el-button type="primary" @click="changeAddOrEdit('add')" icon="plus">新增</el-button>
						</shiro:hasPermission>
						<shiro:hasPermission name="sys:file:delete">
							<el-button type="primary" @click="del" icon="delete">删除</el-button>
						</shiro:hasPermission>
						<!--<el-button shiro:hasPermission="sys:menu:add" type="primary" @click="changeAddOrEdit('add')" icon="plus">新增</el-button>
						<el-button shiro:hasPermission="sys:menu:edit" type="primary" @click="changeAddOrEdit('edit')" icon="edit">修改</el-button>
						<el-button shiro:hasPermission="sys:menu:delete" type="primary" @click="del" icon="delete">删除</el-button>-->
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-table ref="table" :data="page.dataList" border
							  tooltip-effect="dark" style="width: 100%" @selection-change="getSelected">
						<el-table-column type="selection" width="55" prop="menu_id" />

						<el-table-column type="index" label="序号" width="80" prop="menu_id" />

						<el-table-column prop="icon" label="图标" width="80" >
							<template scope="scope">
								<i v-bind:class="scope.row.icon" aria-hidden="true"></i>
							</template>
						</el-table-column>

						<el-table-column prop="title" label="菜单名称" width="200" />

						<el-table-column prop="href" label="链接" width="200" />

						<el-table-column prop="type" label="类型" width="100" :filters="typeEnum"
										 :filter-method="filterType">
							<template scope="scope">
								<el-tag v-show="scope.row.type == 1" type="primary">菜单</el-tag>
								<el-tag v-show="scope.row.type == 2" type="success">列表</el-tag>
								<el-tag v-show="scope.row.type == 3" type="warning">按钮</el-tag>
								<!--{{scope.row.type == 1 ? '菜单':''}}{{scope.row.type == 2 ? '列表':''}}{{scope.row.type == 3 ? '按钮':''}}-->
							</template>
						</el-table-column>

						<el-table-column prop="identify" label="权限标识" width="200" />

						<el-table-column prop="superMenu.title" label="父级" width="200" />

						<el-table-column prop="user.user_name" label="创建人" width="100" />

						<el-table-column prop="create_time" label="创建时间" sortable />

					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNo" :total="page.total"
								   :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" />
				</el-col>
			</el-row>
		</div>
		<div v-show="!showList">
			<el-form label-position="right" label-width="40%" ref="form" :model="form" :rules="rules">
				<el-row type="flex" justify="start">
					<el-col :span="10">
						<el-input v-model="form.menu_id" type="hidden"></el-input>
						<el-form-item label="名称" prop="title">
							<el-input v-model="form.title"></el-input>
						</el-form-item>
						<el-form-item label="类型" prop="type">
							<el-radio-group v-model="form.type" @change="getChecked">
								<el-radio :label="1">菜单</el-radio>
								<el-radio :label="2">列表</el-radio>
								<el-radio :label="3">按钮</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="父级" v-show="form.type != 1" prop="super_id">
							<el-select v-model="form.super_id" filterable clearable placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.menu_id"
										:label="item.title"
										:value="item.menu_id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="链接" v-show="form.type != 1" prop="href">
							<el-input v-model="form.href"></el-input>
						</el-form-item>
						<el-form-item label="图标" v-show="form.type != 3" prop="icon">
							<el-input v-model="form.icon"></el-input>
							<a href="http://fontawesome.io/icons/" target="_blank"><el-tag type="success">更多图标</el-tag></a>
						</el-form-item>
						<el-form-item label="排序" prop="sort">
							<el-input v-model="form.sort" type="number" ></el-input>
						</el-form-item>
						<el-form-item label="权限标识" prop="identify">
							<el-input v-model="form.identify"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row type="flex" justify="start" :gutter="20">
					<el-col  :span="6" :offset="5">
						<el-form-item >
							<el-button type="primary" @click="addOrEdit" v-loading.fullscreen.lock="loading">{{text.submitButtonText}}</el-button>
							<el-button @click="resetForm">重置</el-button>
							<el-button type="info" @click="goBack">返回</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
	<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
	<script type="text/javascript" src="/plugin/jQuery.js"></script>
	<script type="text/javascript" src="/plugin/vue.js"></script>
	<script type="text/javascript" src="/plugin/elementUI/elementUI.js"></script>
	<script type="text/javascript" src="/js/menu.js"></script>
</body>
</html>